<template>
  <div class="block">
    <!-- <p><el-button @click="As">取反</el-button></p> -->
    <!-- 加载图标 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="mini "></el-input>
        <el-card>
          <div class="treeModel">
            <el-tree
                class="filter-tree"
                :data="data"
                :props="defaultProps"
                accordion
                :filter-node-method="filterNode"
                @node-click="handleNodeClick"
                ref="tree"
            ></el-tree>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card>
          <el-row>
            <el-col>
              <el-button type="primary" @click="dialogAddUser=true" size="mini">添加子权限</el-button>

            </el-col>
          </el-row>
          <div class="formAll">
            <el-form ref="form" label-width="80px">
              <el-form-item label="权限名称">
                <el-input v-model="GetByMode.menuName" :disabled="is_edit" size="mini"></el-input>
              </el-form-item>
              <el-form-item label="权限编码">
                <el-input size="mini" v-model="GetByMode.menuCode" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="请求地址">
                <el-input size="mini" v-model="GetByMode.menuPath" :disabled="is_edit"></el-input>
              </el-form-item>
              <el-form-item label="图标">
                <el-input size="mini" v-model="GetByMode.icon" :disabled="true" placeholder="选择图标">
                  <template slot="prepend">
                    <i :class="GetByMode.icon"></i>
                  </template>
                  <el-popover placement="right" width="400" trigger="click" slot="append">
                    <el-row>
                      <el-col v-for="(item,index) in logoList" :key="index" :span="3">
                        <el-button :disabled="is_edit" :icon="item" @click="geticon(item)"></el-button>
                      </el-col>
                    </el-row>
                    <el-button slot="reference">选择</el-button>
                  </el-popover>
                </el-input>
              </el-form-item>
              <el-form-item label="类型">
                <template>
                  <el-radio :disabled="is_edit" v-model="GetByMode.isBtn" :label="0">菜单</el-radio>
                  <el-radio :disabled="is_edit" v-model="GetByMode.isBtn" :label="1">按钮</el-radio>
                </template>
              </el-form-item>
              <el-form-item label="上级名称">
                <el-input size="mini" placeholder="顶级" :disabled="true" v-model="GetByMode.parentName"></el-input>
              </el-form-item>
              <el-form-item label="是否启用">
                <el-switch
                    :disabled="is_edit"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    v-model="GetByMode.isEnable"
                ></el-switch>
              </el-form-item>
              <el-form-item label="排序">
                <el-input-number :disabled="is_edit" size="mini" v-model="GetByMode.sort" :min="0" :max="99999"
                                 label="描述文字"></el-input-number>
              </el-form-item>
            </el-form>
            <!-- 按钮 -->
            <span slot="footer" class="dialog-footer">
              <el-button v-if="!is_edit" type="primary" @click="upt()" size="mini">更新</el-button>
               <el-button v-if="is_edit" type="info" @click="is_edit=false" size="mini">编辑</el-button>
              <el-button type="danger" @click="del(GetByMode.id)" size="mini">删除</el-button>
            </span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog title="添加权限" :visible.sync="dialogAddUser" width="50%" @close="closeInit">
      <!-- 内容主体 -->

      <el-form
          :model="GetByModeAdd"
          ref="addFormRef"
          label-width="70px"
          class="demo-ruleForm"
      >
        <el-form-item label="权限名称">
          <el-input v-model="GetByModeAdd.menuName" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="请求地址">
          <el-input v-model="GetByModeAdd.menuPath" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model="GetByModeAdd.icon" :disabled="true" size="mini" placeholder="选择图标">
            <template slot="prepend">
              <i :class="GetByModeAdd.icon"></i>
            </template>
            <el-popover placement="right" width="400" trigger="click" slot="append">
              <el-row>
                <el-col v-for="(item,index) in logoList" :key="index" :span="3">
                  <el-button :icon="item" size="mini" @click="geticonAdd(item)"></el-button>
                </el-col>
              </el-row>
              <el-button size="mini" slot="reference">选择</el-button>
            </el-popover>
          </el-input>
        </el-form-item>
        <el-form-item label="类型">
          <template>
            <el-radio v-model="GetByModeAdd.isBtn" :label="0">菜单</el-radio>
            <el-radio v-model="GetByModeAdd.isBtn" :label="1">按钮</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="上级名称">
          <el-input placeholder="顶级" :disabled="true" size="mini" v-model="GetByMode.menuName"></el-input>
        </el-form-item>
        <el-form-item label="上级编码">
          <el-input placeholder="00" :disabled="true" size="mini" v-model="GetByMode.menuCode"></el-input>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch
              size="mini"
              active-color="#13ce66"
              inactive-color="#ff4949"
              v-model="GetByModeAdd.isEnable"
              :active-value="true"
              :inactive-value="false"
          ></el-switch>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="GetByModeAdd.sort" size="mini" :min="0" :max="99999" label="描述文字"></el-input-number>
        </el-form-item>
      </el-form>
      <!-- 按钮 -->
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogAddUser = false" size="mini">取 消</el-button>
          <el-button type="primary" @click="addUser(GetByMode.menuCode)" size="mini">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
import logo from '../utils/logoModel'

import {queryModelPage, saveModel, getByModelId, deleteByModelId, updatedByModel} from '../../api/api'

export default {
  data() {
    return {
      logoList: logo.logoAll,
      visible: false,
      data: [],
      defaultProps: {
        children: 'children',
        label: 'menuName'
      },
      filterText: '',
      GetByMode: {},
      GetByModeAdd: {
        icon: 'el-icon-menu',
        isBtn: 0
      },
      dialogAddUser: false,
      is_edit: true
    }
  },
  created() {
    this.queryPage()
    this.GetByModeAdd.sort = 0
    this.GetByModeAdd.isEnable = true
    this.GetByModeAdd.isBtn = 0
  },
  methods: {
    queryPage() {
      queryModelPage('00').then(res => {
        //if (res.code != 20000) this.$message.error(res.message)
        this.data = res.data.tree
      })
    },
    // 关闭添加
    closeInit() {
      this.GetByModeAdd = {
        sort: 0,
        isEnable: true,
        isBtn: 0,
        icon: 'el-icon-menu'
      }

    },
    // 添加
    addUser(parentId) {
      this.GetByModeAdd.parentId = parentId == undefined ? "00" : parentId
      saveModel(this.GetByModeAdd).then(res => {
        if (res.code !== 20000) return
        this.dialogAddUser = false
        this.queryPage()
        return this.$notify({title: '成功', message: res.message, type: 'success'});
      })
    },
    geticonAdd(ico) {
      this.GetByModeAdd.icon = ico
      // ////console.log(this.GetByModeAdd)
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    handleNodeClick(data) {
      this.is_edit = true
      getByModelId(data.id).then(res => {
        if (res.code !== 20000) {
          this.$message.error(res.message)
          return
        }
        this.GetByMode = res.data.data
        this.GetByMode.isBtn = res.data.data.isBtn
        console.log(this.GetByMode)
      })
    },
    geticon(ioc) {
      this.GetByMode.icon = ioc
    },


    /**
     * 更新菜单
     */
    upt() {
      this.is_edit=false
      updatedByModel(this.GetByMode).then(res => {
        //if (res.code != 20000) this.$message.error(res.message)
        this.dialogAddUser = false
        this.queryPage()
        return this.$notify({title: '成功', message: res.message, type: 'success'});
      })
    },
    /**
     * 删除菜单
     * @param id
     */
    del(id) {
      deleteByModelId(id).then(res => {
        //if (res.code != 20000) this.$message.error(res.message)
        this.queryPage()
        this.GetByMode = {}
        return this.$notify({title: '成功', message: res.message, type: 'success'});
      })
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  }
}
</script>
<style lang="less" scoped>
.el-popover .el-row {
  height: 500px;
  overflow-y: scroll;
}

.treeModel {
  width: 90%;
  margin: 0 auto;
  margin-top: 10px;
}

.formAll {
  width: 65%;
  margin-top: 15px;
}
</style>
